<template>
  <div>
    <div>
      <strong>【时间片段分析】</strong>
      <v-chart ref="chart1" :options="option1" id="echarts1" style="height: 150px; width: 700px; margin: auto"></v-chart>
    </div>
    <div style="display: flex; flex-direction: row; flex-wrap: wrap">
      <div name="right" style="width: 65%">
        <strong>【参考数据】</strong>
        <hd-table highlight-row border height="200" :columns="sys_m" :data="sys_m_data_show" :readOnly="true"></hd-table>
      </div>
      <div name="left" style="width: 35%">
        <strong>【设备效率分析】</strong>
        <v-chart ref="chart2" :options="option2" id="echarts2" style="height: 380px; width: 380px"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import BoardService from '@/api/board/board'
function sery(name, data) {
  this.type = 'bar'
  this.name = name
  this.stack = '1'
  this.itemStyle = {
    normal: {
      color: 'rgba(0,191,183,1)',
    },
  }
  this.data = data
}
export default {
  name: 'MachineEffciency',
  props: {
    jtbh: {
      default: 'A01',
      type: String,
    },
  },
  watch: {
    jtbh: function (newValue, oldValue) {
      if (newValue !== oldValue) this.getMachineEfficiencyByCode(newValue)
    },
  },
  data() {
    return {
      sys_m_data: [],
      sys_m: [
        {
          type: 'index',
          width: 35,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '指令',
          key: 'oeeZldm',
          width: 90,
          sortable: true,
        },
        {
          title: '指令名称',
          key: 'oeeZlmc',
          width: 60,
          sortable: true,
        },
        {
          title: '开始时间',
          key: 'oeeKsrq',
          width: 170,
          sortable: true,
        },
        {
          title: '结束时间',
          key: 'oeeJsrq',
          // sortable: true,
          width: 170,
          sortable: true,
        },
        {
          title: '用时(S)',
          key: 'oeeSec',
          width: 80,
          sortable: true,
        },
        {
          title: '用时(H)',
          key: 'oeeHour',
          width: 80,
          sortable: true,
        },
      ],
      sys_m_data_show: [],
      // sys_m_data: [],
      option2: {
        title: {
          text: '',
          x: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          x: 5,
          data: ['正常生产', '异常停机', '排程异常', '停机'],
        },
        series: [
          {
            name: '状态(S)',
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            radius: '45%',
            // center: ["20%", "30%"],
            color: ['#42e238', '#f38eaa', 'white', '#61a0a8'],
            data: [
              { value: 0, name: '正常生产' },
              { value: 0, name: '异常停机' },
              { value: 0, name: '排程异常' },
              { value: 0, name: '停机' },
            ],
          },
        ],
      },
      option1: {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow"
        //   }
        // },
        grid: {
          left: '2%',
          top: '15%',
          bottom: '25%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          max: 24,
          splitNumber: 24,
          // data:[]
        },
        yAxis: {
          type: 'category',
          data: [],
        },
        legend: {
          data: ['正常生产', '异常停机', '排程异常', '停机'],
        },
        series: [],
      },
    }
  },
  mounted() {
    this.getMachineEfficiencyByCode(this.jtbh)
  },
  methods: {
    getMachineEfficiencyByCode(e) {
      BoardService.getMachineEfficiencyByCode(e)
        .then((res) => {
          if (res.code === 200) {
            let asd = 0
            let zxc = 0
            let ase = 0
            let zx = 0
            let a = 0
            let b = 0
            let c = 0
            let d = 0
            let series_for_bar = []
            let temp_list = []
            for (let i = 0; i < res.data[2].length; i++) {
              if (res.data[2][i].oeeZlmc == '正常生产') {
                asd = res.data[2][i].oeeHour + asd
                a = res.data[2][i].oeeSec + a
                // suahn-code
                let start = res.data[2][i].oeeKsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                let end = res.data[2][i].oeeJsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                temp_list.push({
                  start: start[0] + start[1] / 60 + start[2] / 3600,
                  end: end[0] + end[1] / 60 + end[2] / 3600,
                  color: '#42e238', //绿色
                  name: res.data[2][i].oeeZlmc,
                })
              }
              if (res.data[2][i].oeeZlmc == '异常停机') {
                zxc = res.data[2][i].oeeHour + zxc
                b = res.data[2][i].oeeSec + b
                // suahn-code
                let start = res.data[2][i].oeeKsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                let end = res.data[2][i].oeeJsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                temp_list.push({
                  start: start[0] + start[1] / 60 + start[2] / 3600,
                  end: end[0] + end[1] / 60 + end[2] / 3600,
                  color: '#f38eaa', //紫红色
                  name: res.data[2][i].oeeZlmc,
                })
              }
              if (res.data[2][i].oeeZlmc == '排程异常') {
                ase = res.data[2][i].oeeHour + ase
                c = res.data[2][i].oeeSec + c
                // suahn-code
                let start = res.data[2][i].oeeKsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                let end = res.data[2][i].oeeJsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                temp_list.push({
                  start: start[0] + start[1] / 60 + start[2] / 3600,
                  end: end[0] + end[1] / 60 + end[2] / 3600,
                  color: 'white',
                  name: res.data[2][i].oeeZlmc,
                })
              }
              if (res.data[2][i].oeeZldm == '57') {
                zx = res.data[2][i].oeeHour + zx
                d = res.data[2][i].oeeSec + d
                // suahn-code
                let start = res.data[2][i].oeeKsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                let end = res.data[2][i].oeeJsrq
                  .slice(11)
                  .split(':')
                  .map((item) => {
                    return Number(item)
                  })
                temp_list.push({
                  start: start[0] + start[1] / 60 + start[2] / 3600,
                  end: end[0] + end[1] / 60 + end[2] / 3600,
                  color: '#61a0a8',
                  name: res.data[2][i].oeeZlmc,
                })
              }
            }
            //饼图
            this.option2.series[0].data[0].value = a
            this.option2.series[0].data[1].value = b
            this.option2.series[0].data[2].value = c
            this.option2.series[0].data[3].value = d
            this.option2.title.text = this.jtbh
            //时间片
            if (temp_list[0].start !== 0) {
              temp_list.push({
                start: 0,
                end: temp_list[0].start,
                color: '#b2b2b5', //灰色
              })
            }
            for (var i = 0; i < temp_list.length - 1; i++) {
              if (temp_list[i + 1].start - temp_list[i].end > 0.1) {
                temp_list.splice(i, 0, {
                  start: temp_list[i].end,
                  end: temp_list[i + 1].start,
                  name: '',
                  color: '#b2b2b5', //灰色
                })
              }
            }
            if (24 - temp_list[temp_list.length - 1].end > 0.1) {
              temp_list.push({
                start: temp_list[temp_list.length - 1].end,
                end: 24,
                name: '',
                color: '#b2b2b5', //灰色
              })
            } else {
              temp_list[temp_list.length - 1].end = 24
            }
            // console.log(temp_list)
            for (let i of temp_list) {
              let sery1 = new sery(i.name, [(i.end - i.start).toFixed(2)])
              sery1.itemStyle.normal.color = i.color
              series_for_bar.push(sery1)
            }
            this.option1.series = series_for_bar
            this.option1.yAxis.data = [e]

            this.sys_m_data_show = res.data[2]
          } else {
            alert(res.msg)
          }
        })
        .catch((err) => {
          alert(err + '网络原因：请检查网络连接或服务器状态')
          console.log(err + '网络原因：请检查网络连接或服务器状态')
        })
    },
  },
}
</script>

<style lang="scss" module></style>
